<!doctype html lang="pt-br">
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Moto Certo</title>
        <base href="{base_url}{base_template_site}">
        <!--[if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" media="all" href="css/resset.css"/>
        <link rel="stylesheet" media="all" href="css/geral.css"/>
        <link rel="stylesheet" media="all" href="css/anunciar.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- Mobile Safari maximum-scale=1 to fixe the bug auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("input[name=cep]").blur(function(){
                    var cep = $(this).val();
                    
                    if ( cep === '' || cep === '_____-___'){
                        resetaCampos();
                        return false;
                    }
                    $.getJSON('{base_url}pessoa/cep/' + cep, function (data){
                        console.log(data);
                        if (data.resultado == 1 || data.resultado == 2){
                            $("#endereco").val(data.logradouro != '[object Object]' ? data.logradouro : '');
                            $("#cidade").val(data.cidade != null ? data.cidade : '');
                            $("select[name=logradouro] option[value=" + data.tipo_logradouro + "]").attr('selected',true);
                            $("select[name=estado] option[value=" + data.uf + "]").attr('selected',true);
                        }else{
                            resetaCampos();
                        }
                    });
                    
                });
            });
            
            function resetaCampos() {
                $("#endereco").val('');
                $("#cidade").val('');
                $("select[name=logradouro]").prop("selectedIndex",0);
                $("select[name=estado]").prop("selectedIndex",0);
            }
            
            jQuery(function($){
                $("#cpf").mask("999.999.999-99");
                $("#data_nascimento").mask("99/99/9999");
                $("#fone_celular").mask("(99) 9999-9999");
                $("#fone_residencial").mask("(99) 9999-9999");
                $("#fone_comercial").mask("(99) 9999-9999");
                $("#cep").mask("99999-999");
            });
        </script>
    </head>

    <body>
        {include_header}
        <div class="wrapper">
            <header class="nav-option">
                <h1 class="breadcrumb-title">Anunciar</h1> 
                <ul class="breadcrumb">
                    <li>Selecionar Plano de Anúncio &gt;</li>
                    <li>Cadastrar Moto &gt;</li>
                    <li><strong> Identificação </strong>&gt;</li>
                    <li> Pagamento</li>
                </ul>
            </header>
            <div class="content">
                <p class="texto-descricao-1">Cadastro sujeito a verificação, todos os campos devem ser preenchidos com dados verídicos.</p> 

                <form class="form1" method="POST" action="{base_url}pessoa/gravar">
                    <fieldset>
                        <legend class="title-form-1">Dados de Acesso</legend>   
                        <hr>
                        <input type="hidden" name="pagina" id="pagina" value="{pagina}">
                        <input type="hidden" name="rede" id="rede" value="{rede}">
                        <input type="hidden" name="codigo_usuario" id="codigo_usuario" value="{codigo_usuario}">
                        <label for="email"><strong>Digite seu email:</strong></label><br>
                        <input type="email" name="email" id="email" required  style="width: 350px;" value="{email}">{cadastrado}<br>
                        <span class="input-info">Digite seu endereço de Email</span>
                        <br>
                        <br>

                        <label for="cpf"><strong>Digite seu CPF:</strong></label><br>
                        <input type="text" name="cpf" id="cpf" required  style="width: 350px;" maxlength="12" value="{cpf}">{invalido}<br>
                        <span class="input-info">Digite apenas os números do seu documento CPF.</span><br>


                        <label>
                            <input type="radio" value="masculino" required name="sexo" {checked_m}>
                                   Masculino</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>
                            <input type="radio" value="feminino" required name="sexo" {checked_f}>
                                   Feminino</label>
                        <br>
                        <br>
                        <label for="nome"><strong>Nome Completo:</strong></label><br>
                        <input type="text" name="nome" id="nome" required style="width: 350px;" value="{nome}"><br>
                        <span class="input-info">Digite seu nome completo igual ao nome do CPF. Apenas o primeiro nome aparece no anúncio.</span><br>

                        <label for="data_nascimento"><strong>Data Nascimento:</strong></label><br>
                        <input type="text" name="data_nascimento" id="data_nascimento" required value="{data_nascimento}">
                        <span class="input-info">Data de Nascimento.</span><br>

                        <label for="nome_mae"><strong>Nome da Mãe:</strong></label><br>
                        <input type="text" name="nome_mae" id="nome_mae" style="width: 350px;" required value="{nome_mae}">
                        <span class="input-info">Por segurança o nome de sua mãe é obrigatório. Informe o nome de sua mãe igual consta no seu documento de registro RG.</span><br>

                        <label for="senha1"><strong>Senha de Acesso:</strong></label><br>
                        <input type="password" name="senha1" id="senha1" required value="{senha1}">
                        <span class="input-info">Senha para acessar área exclusiva de anunciante.</span><br>
                        <label for="senha2"><strong>Repetir Senha de Acesso:</strong></label><br>
                        <input type="password" name="senha2" id="senha2" required value="{senha2}">
                        <span class="input-info">Redigite sua senha de acesso para confirmar.</span><br>
                        {senha}

                    </fieldset>

                    <fieldset style="margin-top: 50px;">
                        <legend class="title-form-1">Informações de Contato</legend>   
                        <hr>

                        <label><strong>Telefones:</strong></label><br>
                        <label for="fone_celular"><strong>Telefone Celular:</strong></label><br>
                        <input type="text" name="fone_celular" id="fone_celular" required value="{fone_celular}"><br>
                        <span class="input-info">Informe apenas números do seu celular incluindo o DDD.</span><br>

                        <label for="fone_residencial"><strong>Telefone Residencial:</strong></label><br>
                        <input type="text" name="fone_residencial" id="fone_residencial" max="10" value="{fone_residencial}"><br>
                        <span class="input-info">Informe apenas números do seu residencial incluindo o DDD.</span><br>

                        <label for="fone_comercial"><strong>Telefone Comercial:</strong></label><br>
                        <input type="text" name="fone_comercial" id="fone_comercial" max="10" value="{fone_comercial}"><br>
                        <span class="input-info">Informe apenas números do seu comercial incluindo o DDD.</span>
                        <br>
                        <br>
                        <br>

                        <label for="cep"><strong>CEP:</strong></label><br>
                        <input type="text" name="cep" id="cep" max="8" required value="{cep}"><br>
                        <span class="input-info">Digite apenas números.</span>
                        <br>
                        <br>
                        <label for="logradouro"><strong>Logradouro:</strong></label><br>
                        <select name="logradouro" required>
                            <option value>Selecionar</option>
                            <option value="Rua" {selected_r}>Rua</option>
                            <option value="Avenida" {selected_a}>Avenida</option>
                            <option value="Travessa" {selected_t}>Travessa</option>
                        </select>
                        <br>
                        <br>

                        <label for="endereco"><strong>Endereço:</strong></label><br>
                        <input type="text" name="endereco" id="endereco" style="width: 350px;" required value="{endereco}"><br>
                        <br>
                        <br>

                        <label for="numero"><strong>Número:</strong></label><br>
                        <input type="text" name="numero" id="numero" style="width: 350px;" required value="{numero}"><br>
                        <br>
                        <br>

                        <label for="complemento"><strong>Complemento:</strong></label><br>
                        <input type="text" name="complemento" id="complemento" style="width: 350px;" value="{complemento}"><br>
                        <span class="input-info">Campo não obrigatório. Exemplo: SL01 ou APB4 ou Bloco C.</span>
                        <br>
                        <br>

                        <label for="estado" required><strong>Estado:</strong></label><br>
                        <select name="estado">
                            <option value>Selecionar</option>
                            <option value="AC" {selected_ac}>Acre</option>
                            <option value="AL" {selected_al}>Alagoas</option>
                            <option value="AP" {selected_ap}>Amapá</option>
                            <option value="AM" {selected_am}>Amazonas</option>
                            <option value="BA" {selected_ba}>Bahia</option>
                            <option value="CE" {selected_ce}>Ceará</option>
                            <option value="DF" {selected_df}>Distrito Federal</option>
                            <option value="ES" {selected_es}>Espirito Santo</option>
                            <option value="GO" {selected_go}>Goiás</option>
                            <option value="MA" {selected_ma}>Maranhão</option>
                            <option value="MS" {selected_ms}>Mato Grosso do Sul</option>
                            <option value="MT" {selected_mt}>Mato Grosso</option>
                            <option value="MG" {selected_mg}>Minas Gerais</option>
                            <option value="PA" {selected_pa}>Pará</option>
                            <option value="PB" {selected_pb}>Paraíba</option>
                            <option value="PR" {selected_pr}>Paraná</option>
                            <option value="PE" {selected_pe}>Pernambuco</option>
                            <option value="PI" {selected_pi}>Piauí</option>
                            <option value="RJ" {selected_rj}>Rio de Janeiro</option>
                            <option value="RN" {selected_rn}>Rio Grande do Norte</option>
                            <option value="RS" {selected_rs}>Rio Grande do Sul</option>
                            <option value="RO" {selected_ro}>Rondônia</option>
                            <option value="RR" {selected_rr}>Roraima</option>
                            <option value="SC" {selected_sc}>Santa Catarina</option>
                            <option value="SP" {selected_sp}>São Paulo</option>
                            <option value="SE" {selected_se}>Sergipe</option>
                            <option value="TO" {selected_to}>Tocantins</option>
                        </select>

                        <br>
                        <br>

                        <label for="cidade"><strong>Cidade:</strong></label><br>
                        <input type="text" required name="cidade" id="cidade" style="width: 350px;" value="{cidade}"><br>

                        <input type="submit" class="botao-azul" value="Continuar" style="height: 29px;width: 110px; margin-top: 30px;">
                    </fieldset>

                </form>

                <div style="clear:both"></div>

            </div>
        </div>
 {include_footer}

    </body>

</html>